<template>
  <div class="order">
    <el-tabs v-model="currentTab" @tab-click="handleClick">
      <el-tab-pane label="提货点管理" name="PickUpPoint"></el-tab-pane>
      <el-tab-pane label="配送线路" name="DistributionLines"></el-tab-pane>
      <el-tab-pane label="配送设置" name="RectionSetting"></el-tab-pane>
    </el-tabs>
    <component :is="currentTab" :rectStatus.sync="rectStatus"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import RectionSetting from "./components/rectionSetting/RectionSetting.vue";
import PickUpPoint from "./components/pickUpPoint/PickUpPoint.vue";
import DistributionLines from "./components/distributionLines/DistributionLines.vue";

/** 订单默认页 */
@Component({
  components: { RectionSetting, PickUpPoint, DistributionLines },
})
export default class Rection extends Vue {
  /** 当前tab */
  currentTab = "PickUpPoint";

  /** 设置是否启用直配,0=禁用,1=启用 */
  rectStatus = false;

  mounted() {
    if (this.$route.query.from == "point") {
      this.currentTab = "PickUpPoint";
    }
  }

  handleClick(e) {
    this.currentTab = e.name;
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #f5f5f5;
  z-index: 1;
}
@import "@/assets/styles/logistics/rection.scss";
</style>
